<!--
 * @Author: your name
 * @Date: 2021-08-31 19:44:13
 * @LastEditTime: 2021-09-01 14:02:01
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \经纪人\broker-page\app\src\views\index\message\index.vue
-->
<template>
  <div class="message">
    <div class="header">
      <van-icon name="arrow-left" @click="message" />
      <span>消息列表</span>
      <span></span>
    </div>
    <div class="main">
      <van-tabs v-model="active">
        <van-tab title="消息"><News></News></van-tab>
        <van-tab title="公告"><Notice></Notice></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
//消息公告组件切换
import News from "../../../components/news.vue";
import Notice from "../../../components/notice.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup() {
    const active = ref(2);
    return { active };
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  components: {
    News,
    Notice,
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    message() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.message {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 16px;
    padding: 0 10px;
    background-image: linear-gradient(to right, #0272f0, #2593f9, #39a5ff);
  }
  .main {
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }
}
</style>
